<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" plain @click="addroledialog">添加设备</el-button>
    </div>
    <div class="filter-container">
      <el-input clearable @keyup.enter.native="handleFilter" style="width: 150px;" class="filter-item" placeholder="设备名称" v-model="listQuery.deviceName">
      </el-input>
      <el-select clearable v-model="listQuery.provinceId" placeholder="请选择" @change="getcity" style="width: 150px;">
        <el-option
          v-for="item in provinceLIst"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select clearable v-model="listQuery.cityId" placeholder="请选择" @change="getdistrict" style="width: 150px;">
        <el-option
          v-for="item in cityList"
          :key="item.code"
          :label="item.name"
          :value="item.code"
          change="getarea">
        </el-option>
      </el-select>
      <el-select clearable v-model="listQuery.districtId" placeholder="请选择" @change="getstreet" style="width: 150px;">
        <el-option
          v-for="item in districtList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select clearable v-model="listQuery.streetId" placeholder="请选择" style="width: 150px;">
        <el-option
          v-for="item in streetList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select clearable v-model="listQuery.unitId" placeholder="请选择社区">
        <el-option v-for="(item, index) in community" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
      </el-select>
      <el-select clearable class="filter-item" style="width: 130px;" v-model="listQuery.typeId" placeholder="请选择">
        <el-option v-for="item in typedata" :key="item.uuid" :label="item.name" :value="item.uuid">
        </el-option>
      </el-select>
      <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='设备名称' width="150">
        <template slot-scope="scope">
          {{scope.row.deviceName}}
        </template>
      </el-table-column>
      <el-table-column label="设备ID" align="center" width="240">
        <template slot-scope="scope">
          <span>{{scope.row.deviceId}}</span>
        </template>
      </el-table-column>
      <el-table-column label="省市区街道" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.provinceName}},{{scope.row.cityName}},{{scope.row.districtName}},{{scope.row.streetName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属社区" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.unitName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备类型" align="center" width="95">
        <template slot-scope="scope">
          <span>{{scope.row.deviceTypeName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="桶数量" align="center" width="95">
        <template slot-scope="scope">
          <span>{{scope.row.barrelNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="getbarrelList(scope.row,scope.$index)" plain>查看桶</el-button>
          <el-button type="primary" size="mini" @click="bianji(scope.row,scope.$index)" plain>编辑</el-button>
          <el-button type="danger" size="mini" @click="shanchu(scope.row, scope.$index)" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30,50]"
                     :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!--分页END-->

    <!--新增表单弹窗-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="formsrules" ref="dataForm" :model="temp" label-position="right" label-width="120px" style='width: 530px; margin-left:50px;'>
        <el-form-item label="设备ID：" prop="deviceId">
          <el-input v-model="temp.deviceId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备名称：" prop="deviceName">
          <el-input v-model="temp.deviceName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="社区选择：" prop="unitId">
          <el-select v-model="temp.unitId" placeholder="请选择社区">
            <el-option v-for="(item, index) in community" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属类型：" prop="deviceTypeId">
          <el-select v-model="temp.deviceTypeId" placeholder="请选择类型">
            <el-option v-for="item in typedata" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="桶数量：" prop="barrelNum">
          <el-select v-model="temp.barrelNum" placeholder="请选择数量">
            <el-option v-for="(item, index) in numbers" :key="item" :label="item" :value="item  "></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="垃圾桶类型：" prop="barrelInformation">
          <el-row :gutter="20" v-if="temp.barrelNum > 0">
            <el-col :span="7">
              <el-select v-model="temp.barrelInformation.type0" placeholder="请选择">
                <el-option v-for="(item, index) in rubishType" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9" prop="fullThreshold0">
              <el-input type="number" v-model="temp.barrelInformation.fullThreshold0" placeholder="桶满阈值">
                <template slot="append">%</template>
              </el-input>
            </el-col>
            <el-col :span="7">
              <el-input type="number" v-model="temp.barrelInformation.weightThreshold0" placeholder="超重阈值">
              </el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="temp.barrelNum > 1">
            <el-col :span="7">
              <el-select v-model="temp.barrelInformation.type1" placeholder="请选择">
                <el-option v-for="(item, index) in rubishType" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-input type="number" v-model="temp.barrelInformation.fullThreshold1" placeholder="桶满阈值">
                <template slot="append">%</template>
              </el-input>
            </el-col>
            <el-col :span="7">
              <el-input type="number" v-model="temp.barrelInformation.weightThreshold1" placeholder="超重阈值">
              </el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="temp.barrelNum > 2">
            <el-col :span="7">
              <el-select v-model="temp.barrelInformation.type2" placeholder="请选择">
                <el-option v-for="(item, index) in rubishType" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-input type="number" v-model="temp.barrelInformation.fullThreshold2" placeholder="桶满阈值">
                <template slot="append">%</template>
              </el-input>
            </el-col>
            <el-col :span="7">
              <el-input type="number" v-model="temp.barrelInformation.weightThreshold2" placeholder="超重阈值">
              </el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="temp.barrelNum > 3">
            <el-col :span="7">
              <el-select v-model="temp.barrelInformation.type3" placeholder="请选择">
                <el-option v-for="(item, index) in rubishType" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-input type="number" v-model="temp.barrelInformation.fullThreshold3" placeholder="桶满阈值">
                <template slot="append">%</template>
              </el-input>
            </el-col>
            <el-col :span="7">
              <el-input type="number" v-model="temp.barrelInformation.weightThreshold3" placeholder="超重阈值">
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="addrole">确 定</el-button>
        <el-button v-else type="primary" @click="sureEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增表单弹窗END-->

    <!--编辑表单弹窗-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormEdit">
      <el-form :rules="formsrules" ref="dataForm" :model="temp" label-position="right" label-width="120px" style='width: 530px; margin-left:50px;'>
        <el-form-item label="设备ID：" prop="deviceId">
          <el-input v-model="temp.deviceId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备名称：" prop="deviceName">
          <el-input v-model="temp.deviceName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="社区选择：" prop="unitId">
          <el-select v-model="temp.unitId" placeholder="请选择社区">
            <el-option v-for="(item, index) in community" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属类型：" prop="deviceTypeId">
          <el-select v-model="temp.deviceTypeId" placeholder="请选择类型">
            <el-option v-for="item in typedata" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="桶数量：" prop="barrelNum">
          <el-select v-model="temp.barrelNum" placeholder="请选择数量">
            <el-option v-for="(item, index) in numbers" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="垃圾桶类型：" prop="barrelInformation">
          <el-row :gutter="20" v-if="temp.barrelNum > 0">
            <el-col :span="7">
              <el-select v-model="editbarrelList[0].typeCode" placeholder="请选择">
                <el-option v-for="(item, index) in rubishType" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-input type="number" v-model="editbarrelList[0].fullThreshold" placeholder="桶满阈值">
                <template slot="append">%</template>
              </el-input>
            </el-col>
            <el-col :span="7">
              <el-input type="number" v-model="editbarrelList[0].weightThreshold" placeholder="超重阈值">
              </el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="temp.barrelNum > 1">
            <el-col :span="7">
              <el-select v-model="editbarrelList[1].typeCode" placeholder="请选择">
                <el-option v-for="(item, index) in rubishType" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-input type="number" v-model="editbarrelList[1].fullThreshold" placeholder="桶满阈值">
                <template slot="append">%</template>
              </el-input>
            </el-col>
            <el-col :span="7">
              <el-input type="number" v-model="editbarrelList[1].weightThreshold" placeholder="超重阈值">
              </el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="temp.barrelNum > 2">
            <el-col :span="7">
              <el-select v-model="editbarrelList[2].typeCode" placeholder="请选择">
                <el-option v-for="(item, index) in rubishType" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-input type="number" v-model="editbarrelList[2].fullThreshold" placeholder="桶满阈值">
                <template slot="append">%</template>
              </el-input>
            </el-col>
            <el-col :span="7">
              <el-input type="number" v-model="editbarrelList[2].weightThreshold" placeholder="超重阈值">
              </el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="temp.barrelNum > 3 && editbarrelList[3]">
            <el-col :span="7">
              <el-select v-model="editbarrelList[3].typeCode" placeholder="请选择">
                <el-option v-for="(item, index) in rubishType" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-input type="number" v-model="editbarrelList[3].fullThreshold" placeholder="桶满阈值">
                <template slot="append">%</template>
              </el-input>
            </el-col>
            <el-col :span="7">
              <el-input type="number" v-model="editbarrelList[3].weightThreshold" placeholder="超重阈值">
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</el-button>
        <el-button type="primary" @click="sureEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑表单弹窗END-->

    <!--查看桶信息弹窗-->
    <el-dialog title="桶列表" :visible.sync="dialogbarrelVisible">
      <el-row>
        <el-table :data="barrelList" border fit highlight-current-row>
          <el-table-column align="center" label='桶号'>
            <template slot-scope="scope">
              {{scope.row.binNo}}
            </template>
          </el-table-column>
          <el-table-column label="桶类型" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.typeName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="故障状态" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.failureStateName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="工作状态" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.workingStateName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前容量" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.binVolume}}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前温度" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.binTemperature}}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前水量" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.binWater}}</span>
            </template>
          </el-table-column>
          <el-table-column label="桶满阈值" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.fullThreshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="超重阈值" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.weightThreshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="putIn(scope.row,scope.$index)" plain>投放列表</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogbarrelVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!--查看桶信息弹窗END-->
  </div>
</template>

<script>
  import { getList, getdetail, getbarrelList, addroles, sureEdit, shanchu } from '@/api/device/deviceList'
  import { getType, getcommunity, getareaList } from '@/api/public'

  const rubishType = [
    { key: '0', display_name: '厨余' },
    { key: '1', display_name: '纸张' },
    { key: '2', display_name: '金属' },
    { key: '3', display_name: '塑料' },
    { key: '4', display_name: '玻璃' },
    { key: '5', display_name: '其他' },
    { key: '6', display_name: '回收' },
    { key: '7', display_name: '有害' },
    { key: '8', display_name: '织物' }
  ]

  const failureState = [
    { key: '0', display_name: '正常' },
    { key: '1', display_name: '温度传感器断开' },
    { key: '2', display_name: '容量传感器断开' },
    { key: '4', display_name: '称重系统故障' },
    { key: '10', display_name: '电机断开' },
    { key: '20', display_name: '电机短路' }
  ]

  const failureStateValue = failureState.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  const workingState = [
    { key: '0', display_name: '正常' },
    { key: '1', display_name: '温度超限' },
    { key: '2', display_name: '容量已满' },
    { key: '4', display_name: '称重超限' },
    { key: '8', display_name: '垃圾被清理' },
    { key: '10', display_name: '投口未关闭' }
  ]

  const workingStateValue = workingState.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  export default {
    data() {
      var limit100 = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('数值不能为空'))
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (value < 0 || value > 100) {
              callback(new Error('请输入正确的数值'))
            } else {
              callback()
            }
          }
        }, 1000)
      }
      return {
        list: null,
        listLoading: true,
        total: null,
        listQuery: {
          deviceName: '',
          defaultarea: [],
          provinceId: '',
          cityId: '',
          districtId: '',
          streetId: '',
          unitId: '',
          typeId: ''
        },
        provinceLIst: [],
        cityList: [],
        districtList: [],
        streetList: [],
        temp: {
          deviceId: undefined,
          deviceName: '',
          deviceTypeId: '',
          barrelNum: '',
          unitId: '',
          barrelInformation: {
            'type0': '',
            'fullThreshold0': '',
            'weightThreshold0': '',
            'type1': '',
            'fullThreshold1': '',
            'weightThreshold1': '',
            'type2': '',
            'fullThreshold2': '',
            'weightThreshold2': '',
            'type3': '',
            'fullThreshold3': '',
            'weightThreshold3': ''
          }
        },
        editbarrelList: [{ typeCode: '',
          fullThreshold: '',
          weightThreshold: '' }, { typeCode: '',
          fullThreshold: '',
          weightThreshold: '' }, { typeCode: '',
          fullThreshold: '',
          weightThreshold: '' }, { typeCode: '',
          fullThreshold: '',
          weightThreshold: '' }],
        typedata: [],
        community: [],
        rubishType,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        numbers: [1, 2, 3, 4],
        dialogFormVisible: false,
        dialogFormEdit: false,
        dialogbarrelVisible: false,
        barrelList: undefined,
        formsrules: {
          deviceId: [{ required: true, message: '请输入', trigger: 'blur' }],
          deviceName: [{ required: true, message: '请输入', trigger: 'blur' }],
          deviceTypeId: [{ required: true, message: '请选择', trigger: 'change' }],
          unitId: [{ required: true, message: '请选择', trigger: 'change' }],
          barrelNum: [{ required: true, message: '请选择', trigger: 'change' }],
          barrelInformation: [{ required: true, message: '请选择', trigger: 'blur' }],
          fullThreshold: [{ validator: limit100, trigger: 'blur' }]
        }
      }
    },
    filters: {
      failureFilter(type) {
        return failureStateValue[type]
      },
      workingFilter(type) {
        return workingStateValue[type]
      }
    },
    computed: {
      failureFilter() {

      }
    },
    created() {
      this.fetchData()
      this.getType()
      this.getcommunity()
      this.getarea()
    },
    methods: {
      // 获取列表
      fetchData() {
        this.listLoading = true
        getList(this.listQuery).then(response => {
          this.list = response.data.content
          this.total = response.data.totalElements
          this.listQuery.size = response.data.size
          this.listLoading = false
        })
      },
      getType() {
        getType().then(response => {
          this.typedata = response.data
        })
      },
      getcommunity() {
        getcommunity().then(response => {
          this.community = response.data.content
        })
      },
      getarea() {
        getareaList(undefined).then(res => {
          this.provinceLIst = res.data
        })
      },
      getcity(value) {
        getareaList(value).then(res => {
          this.cityList = res.data
        })
      },
      getdistrict(value) {
        getareaList(value).then(res => {
          this.districtList = res.data
        })
      },
      getstreet(value) {
        getareaList(value).then(res => {
          this.streetList = res.data
        })
      },
      getbarrelList(row) {
        this.listLoading = true
        getbarrelList(row.deviceId).then(response => {
          this.dialogbarrelVisible = true
          this.barrelList = response.data
          this.listLoading = false
        })
      },
      handleFilter() {
        this.fetchData()
      },
      addroledialog() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        const o = {
          typeCode: 0,
          fullThreshold: '',
          weightThreshold: ''
        }
        for (var x = this.editbarrelList.length; x < 4; x++) {
          this.editbarrelList.push(o)
        }
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      resetTemp() {
        this.temp = {
          deviceId: undefined,
          deviceName: '',
          deviceTypeId: '',
          barrelNum: '',
          unitId: '',
          barrelInformation: {
            'type0': '',
            'fullThreshold0': '',
            'weightThreshold0': '',
            'type1': '',
            'fullThreshold1': '',
            'weightThreshold1': '',
            'type2': '',
            'fullThreshold2': '',
            'weightThreshold2': '',
            'type3': '',
            'fullThreshold3': '',
            'weightThreshold3': ''
          }
        }
        this.selected = []
      },
      addrole() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addroles(this.temp).then(() => {
              this.list.unshift(this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
              location.reload()
            })
          }
        })
      },
      bianji(row) {
        getdetail(row.uuid).then(response => {
          this.editbarrelList = [{ typeCode: '',
            fullThreshold: '',
            weightThreshold: '' }, { typeCode: '',
            fullThreshold: '',
            weightThreshold: '' }, { typeCode: '',
            fullThreshold: '',
            weightThreshold: '' }, { typeCode: '',
            fullThreshold: '',
            weightThreshold: '' }]
          this.temp = response.data.equipment
          var i = response.data.barrelList
          for (var x = 0; x < i.length; x++) {
            this.$set(this.editbarrelList, x, i[x])
          }
          var list = {
            'type0': '',
            'fullThreshold0': '',
            'weightThreshold0': '',
            'type1': '',
            'fullThreshold1': '',
            'weightThreshold1': '',
            'type2': '',
            'fullThreshold2': '',
            'weightThreshold2': '',
            'type3': '',
            'fullThreshold3': '',
            'weightThreshold3': ''
          }
          this.temp.barrelInformation = list
          this.dialogStatus = 'update'
          this.dialogFormEdit = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        })
      },
      sureEdit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const temData = Object.assign({}, this.temp)
            this.editbarrelList.forEach(function(value, index, array) {
              temData.barrelInformation['type' + index] = array[index].typeCode
              temData.barrelInformation['fullThreshold' + index] = array[index].fullThreshold
              temData.barrelInformation['weightThreshold' + index] = array[index].weightThreshold
            })
            sureEdit(temData).then(response => {
              this.temp = response.data.equipment
              this.temp.barrelInformation = response.data.barrelList
              for (const v of this.list) {
                if (v.id === this.temp.id) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.temp)
                  break
                }
              }
              this.dialogFormEdit = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          } else {
            return false
          }
        })
      },
      shanchu(row) {
        this.$confirm('确定删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          shanchu(row.uuid).then(() => {
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '删除失败，请稍后重试！'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.fetchData()
      },
      putIn(row) {
        this.$router.push({ name: '设备投放列表', params: { uuid: row.uuid }})
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .filter-container{
    padding-bottom: 10px;
  }
  .area-select .el-select{
    margin-left: 0;
  }
  .area-select{
    display: inline-block;
  }
</style>
